<template>
  <div class="GridPage">
    <van-swipe autoplay="5000" indicator-color="#B99267">
      <van-swipe-item v-for="(item, index) in merchantType" :key="index">
        <ul>
          <li
            v-for="(item1, index1) in item"
            :key="index1"
            @click="goToclassMerchant(item1.typeId)"
          >
            <div>
              <img :src="$base.baseImg+item1.icon" />
              <p>{{ item1.typeName }}</p>
            </div>
          </li>
        </ul>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import { Swipe, SwipeItem } from "vant";

Vue.use(Swipe);
Vue.use(SwipeItem);
@Component({})
export default class GridPage extends Vue {
  @Prop() merchantType?: any[];
  private goToclassMerchant(e: string) {
    this.$router.push(`classMerchant/${e}`);
  }
}
</script>

<style lang="scss">
.GridPage {
  width: 100%;
  background-color: #ffffff;
  ul {
    width: 100%;
    float: left;
    list-style: none;
    overflow: hidden;
    padding: 20px 0;
    li {
      float: left;
      width: 25%;
      margin-bottom: 10px;
      padding: 10px 15px;
      box-sizing: border-box;
      img {
        width: 90px;
        height: 90px;
        margin: auto;
        display: block;
        border-radius: 50px;
      }
      p {
        text-align: center;
        line-height: 1.5;
        font-size: 28px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>